import React, { Component } from "react";
import CSSModules from "react-css-modules";
//import { NavLink, Switch, Route } from "react-router-dom";
import axios from "axios";
import styles from "./index.scss";
// import Login from "./Login";
// import Register from "./Register";
import {
  TabContent,
  TabPane,
  Nav,
  NavItem,
  NavLink,
  Card,
  Button,
  CardTitle,
  CardText,
  Row,
  Col,
  Form,
  FormGroup,
  Label,
  Input,
  FormText
} from "reactstrap";
import classnames from "classnames";

import { createStore } from "redux";
import { Provider } from "react-redux";
import { combineForms } from "react-redux-form";
//import MyForm from "./my-form-component";
import $ from "jquery";
//import style from "./login.scss";

const initialUser = { name: "" };
const store = createStore(
  combineForms({
    user: initialUser
  })
);

//export default class Login extends Component
class Login_register extends Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = {
      list: [],
      activeTab: "1",
      userNameValue: "",
      PassValue: "",
      sexValue: "",
      telValue: ""
    };
  }
  toggle(tab) {
    if (this.state.activeTab !== tab) {
      this.setState({
        activeTab: tab
      });
    }
  }
  componentDidMount() {
    // axios({
    //   url: "http://localhost:3000/login",
    //   method: "get"
    // }).then(res => {
    //   this.setState({
    //     list: [...res.data]
    //   });
    // });
    $("#mtext").hide();
    //console.log($("#mtext"));
    $("#more").click($("#mtext").show(), $("#mm").text("收起"));
  }
  handlerUser = e => {
    this.setState({
      userNameValue: e.target.value
    });
  };
  handlerPass = e => {
    this.setState({
      PassValue: e.target.value
    });
  };
  handlersex = e => {
    this.setState({
      sexValue: e.target.value
    });
  };
  handlertel = e => {
    this.setState({
      telValue: e.target.value
    });
  };

  handlerSearch = () => {
    //console.log(this.state.userNameValue, this.state.PassValue);
    var name = this.state.userNameValue;
    var pass = this.state.PassValue;

    // this.props.history.push(`news/${id}`);
    axios({
      //url: "http://47.110.60.142:8080/zhuiying/login",
      url: "http://47.110.60.142:8080/jointproject/login",
      method: "post",
      params: {
        username: name,
        password: pass,
      }
    })
      .then(res => {
        //后台返回是否验证成功，有值则页面跳转，无值则页面不跳转
        // console.log(res.data);
        // this.setState({
        //   list: [...res.data]
        // });
        // console.log(this.state.list);
        // var list = this.state.list;
        // var stop = "";
        // for (var i = 0; i < list.length; i++) {
        //   //console.log(list[i].name);
        //   if (list[i].username==name&& list[i].password == pass) {
        //     stop = true;
        //     break;
        //   } else {
        //     stop = false;
        //   }
        // }
        // //console.log(stop);
        // if (stop) {
        //   alert("success");
        //   var url = "/";
        //   this.props.history.push(url);
        // } else {
        //   alert("fail");
        // }
        console.log(res.data);
         this.setState({
            list: res.data
          });
          var list = this.state.list;
          console.log(list);
          // console.log(...res.data);
          var stop = "";
          if(list.username){
            stop = true;

              } else {
                stop = false;
              }
              if (stop) {
                  alert("success");
                  var url = "/";
                  this.props.history.push(url);
                } else {
                  alert("fail");
                }
      })
      .catch(function(error) {
        console.log(error);
      });
  };
  handlerSearch1 = () => {
    //console.log(this.state.userNameValue, this.state.PassValue);
    var name = this.state.userNameValue;
    var pass = this.state.PassValue;
    var sex = this.state.sexValue;
    var tel = this.state.telValue;

    // this.props.history.push(`news/${id}`);
    axios({
      url: "http://47.110.60.142:8080/jointproject/regist",
      method: "post",
      params: {
        username: name,
        password: pass,
        sex: sex,
        email: tel
      }
    })
      .then(res => {
        this.setState({
          list: res.data
        });
        console.log(this.state.list);
        var list = this.state.list;
        var stop = "";
        
          if (list=="注册成功") {
            stop = true;
            
          } else {
            stop = false;
          }
        
        if (stop) {
         
          alert("注册成功");
          var url = "/login_register/login";
          this.props.history.push(url);
        } else {
           alert("该账户已存在");
        } 
        
      })
      .catch(function(error) {
        console.log(error);
      });
  };

  render() {
   // console.log(this.props);
    const type = this.props.match.params.type;
    //var type = params.type;
    var url = "/login_register";
    if (type == "login") {
      this.toggle("1");
    } else if (type == "register") {
      this.toggle("2");
    }

    return (
      <div>
        {/*<div styleName="header">
          <div styleName="wrap">
            <div styleName="logo">
              <img src="./images/logo_01.png" />
            </div>
            <div styleName="enter">登录</div>
          </div>
    </div>*/}
        <div styleName="main">
          <img src="./images/beijing.jpg" />
          <div styleName="wrap">
            <div styleName="m-form">
              <div styleName="title">
                <Nav tabs styleName="nav-tabs">
                  <NavItem styleName="nav-item">
                    <NavLink
                      styleName={classnames({
                        active: this.state.activeTab === "1"
                      })}
                      onClick={() => {
                        this.props.history.push(url + "/login");
                        //this.toggle("1");
                      }}
                    >
                      登录
                    </NavLink>
                  </NavItem>
                  <NavItem styleName="nav-item">
                    <NavLink
                      styleName={classnames({
                        active: this.state.activeTab === "2"
                      })}
                      onClick={() => {
                        this.props.history.push(url + "/register");
                        //this.toggle("2");
                      }}
                    >
                      注册
                    </NavLink>
                  </NavItem>
                </Nav>

                <TabContent activeTab={this.state.activeTab}>
                  <TabPane tabId="1">
                    <Row>
                      <Col sm="12">
                        <Form>
                          <FormGroup>
                            <Label for="exampleEmail">用户名</Label>
                            <Input
                              type="email"
                              name="email"
                              id="exampleEmail"
                              placeholder="with a placeholder"
                              ref="search1"
                              onChange={this.handlerUser}
                            />
                          </FormGroup>
                          <FormGroup>
                            <Label for="examplePassword">密码</Label>
                            <Input
                              type="password"
                              name="password"
                              id="examplePassword"
                              placeholder="password placeholder"
                              ref="search2"
                              onChange={this.handlerPass}
                            />
                          </FormGroup>
                          <FormGroup check>
                            <Label check>
                              <Input type="checkbox" /> Check me out
                            </Label>
                          </FormGroup>
                          <Button
                            styleName="btn-secondary"
                            styleName="btn-secondary"
                            onClick={this.handlerSearch}
                          >
                            登录
                          </Button>
                        </Form>
                      </Col>
                    </Row>
                  </TabPane>
                  <TabPane tabId="2">
                    <Row>
                      <Col sm="12">
                        <Form>
                          <FormGroup>
                            <Label for="exampleEmail">用户名</Label>
                            <Input
                              type="email"
                              name="email"
                              id="exampleEmail1"
                              placeholder="with a placeholder"
                              ref="search1"
                              onChange={this.handlerUser}
                            />
                          </FormGroup>
                          <FormGroup>
                            <Label for="examplePassword">密码</Label>
                            <Input
                              type="password"
                              name="password"
                              id="examplePassword1"
                              placeholder="8~16个字符,包含字母、数字、符号2种组合"
                              ref="search2"
                              onChange={this.handlerPass}
                            />
                          </FormGroup>
                          <FormGroup>
                            <Label for="examplesex">性别</Label>
                            <Input
                              type="sex"
                              name="sex"
                              id="examplesex"
                              placeholder=" "
                              ref="search3"
                              onChange={this.handlersex}
                            />
                          </FormGroup>
                          <FormGroup>
                            <Label for="exampletel">电话</Label>
                            <Input
                              type="tel"
                              name="tel"
                              id="exampletel"
                              placeholder=" "
                              ref="search4"
                              onChange={this.handlertel}
                            />
                          </FormGroup>
                          <FormGroup check>
                            <Label check>
                              <Input type="checkbox" /> Check me out
                            </Label>
                          </FormGroup>
                          <Button
                            styleName="btn-secondary"
                            onClick={this.handlerSearch1}
                          >
                            注册
                          </Button>
                        </Form>
                      </Col>
                    </Row>
                  </TabPane>
                </TabContent>
              </div>

              <div styleName="form-bottom" id="form-bottom">
                <p styleName="count">
                  <span>使用合作账号注册</span>
                </p>
                <ul>
                  <li>
                    <a href="#">
                      <img src="./images/weixin.png" />
                      <span>微信</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/QQ.png" />
                      <span>QQ</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/weibo.png" />
                      <span>微博</span>
                    </a>
                  </li>
                  <li id="more">
                    <i styleName="icons" />
                    <span id="mm">更多</span>
                  </li>
                </ul>
                <dl id="mtext" styleName="mtext">
                  <dd>
                    <a href="javascript:;">
                      <i styleName="icons icons1" />
                      <span>支付宝</span>
                    </a>
                    <a href="javascript:;">
                      <i styleName="icons icons2" />
                      <span>百度</span>
                    </a>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default CSSModules(Login_register, styles, { allowMultiple: true });
